<template>
   <div class="cinema">
      <van-list
        :finished="finished"
        finished-text="没有更多了"
      >
        <van-cell
        v-for="item in cinemaList"
        :key="item.id"
        class="item_cinema">
        <template #title>
          <span class="title">{{ item.nm }}</span>
          <span class="price-block">
            <span class="price">{{item.price}}</span>
            <span class="q">元起</span>
          </span>
          <div class="sub-block">
            <div class="subTitle">{{ item.addr }}</div>
            <div class="distance"></div>
          </div>
          <van-tag plain type="primary"
            v-for="prod in item.labels"
            :key="prod.name"
            :color="prod.color"
            style="margin-right: 5px"
          >
            {{prod.name}}
          </van-tag>
          <div>
            <img src="@/img/card.png" alt="" class="card" v-if="item.promotion.cardPromotionTag">
            <span class="discount">{{ item.promotion.cardPromotionTag }}</span>
          </div>
        </template>
        </van-cell>
    </van-list>
   </div>
</template>

<script>
// import { getCinema } from '@/api/cinema'
import cinema from '@/mock/cinema'

export default {
  name: 'Cinema',
  data() {
    return {
      cinemaList: [],
      loading: false,
      finished: false,
      refreshing: false,
    }
  },
  created() {
    this.cinemaList = cinema.data.cinemas
    console.log(this.cinemaList)
  },
}
</script>

<style lang="less">
    .title {
      font-size: 16px;
      line-height: 46px;
      color: #000;
    }
    .price-block {
      padding-top: 18px;
      padding-left: 6px;
      .price {
        font-size: 18px;
        color: #f03d37;
      }
      .q {
        font-size: 11px;
        margin-left: 3px;
        color: #f03d37;
      }
    }
    .sub-block {
      margin-top: 6px;
      font-size: 13px;
      color: #666;
      display: flex;
      .subTitle {
      overflow: hidden;
      width: 574px;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    }
    .discount {
      font-size: 11px;
      color: #999;
    }
    .card {
      width: 30px;
      height: 28px;
      position: relative;
      top: 3px;
      margin-right: 5px;
    }
</style>
